<template>
  <div class="score-mark" :style="styleStr">
    <span>{{ props.mark.score }}</span>
    <button @click.stop="onClickRemove()" class="btn btn-remove"></button>
    <button @click.stop="onClickAdd()" class="btn btn-add"></button>
    <button
      :disabled="!canMinus"
      @click.stop="onClickMinus()"
      class="btn btn-minus"
    ></button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const emit = defineEmits(['remove', 'add', 'minus'])
const props = defineProps({
  mark: { type: Object, required: true }
})
const styleStr = computed(() => {
  const { x, y } = props.mark
  return `left: ${x - 1}%; top: ${y - 1}%`
})

const canMinus = computed(() => {
  return Math.abs(props.mark.score) > 0
})

const onClickRemove = () => {
  emit('remove')
}

const onClickAdd = () => {
  emit('add')
}

const onClickMinus = () => {
  emit('minus')
}
</script>

<style lang="less" scoped>
@baseURL: '@/assets/images/score-mark';

.score-mark {
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 25px;
  text-shadow:
    0px -2px #fff,
    2px 0px #fff,
    0px 2px #fff,
    -2px 0px #fff,
    2px 2px #fff,
    -2px -2px #fff,
    -2px 2px #fff,
    2px -2px #fff,
    0px 0px 10px #000;
  line-height: 1;
  font-size: 50px;
  font-weight: bold;
  color: #e84c3d;
  &:hover {
    z-index: 996;
    .btn {
      visibility: visible;
    }
  }

  .btn {
    position: absolute;
    border: 0;
    width: 18px;
    height: 18px;
    outline: 0;
    background-color: transparent;
    background-size: contain;
    cursor: pointer;
    visibility: hidden;

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    &:focus,
    &:hover {
      filter: opacity(0.8);
    }

    &:active {
      filter: brightness(0.9);
    }
  }

  .btn-remove {
    top: -5px;
    right: 0;
    background-image: url('@{baseURL}/btn-remove.png');
  }

  .btn-add {
    top: 32%;
    right: 0;
    background-image: url('@{baseURL}/btn-add.png');
  }

  .btn-minus {
    bottom: -5px;
    right: 0;
    background-image: url('@{baseURL}/btn-minus.png');
  }
}
</style>
